import React from 'react'
import { Select, SelectProps, Tag, Tooltip } from 'antd'
import { connect, getState, IStoreState } from '../../store'
import { DBKey, UserRole } from '../../../server/interface'


const _RoleSelect = (props: SelectProps & Pick<IStoreState, 'role_map'>) => {
    const { role_map, ...rest } = props
    return (
        <Select placeholder="请选择用户角色" {...rest} options={Array.from(role_map).map(([key, role]) => ({
            value: key,
            label: role.name,
        }))}/>
    )
}

export const RoleSelect = connect(() => {
    const { role_map } = getState()
    return { role_map }
})(_RoleSelect)


interface RoleTagsProps {
    roles: string[];
    role_map: Map<DBKey, UserRole>;
    type?: 'tag' | 'paragraph'
}
const _RoleTags = (props: RoleTagsProps) => {
    const { roles = [], role_map, type = 'tag' } = props
    if (type === 'tag') {
        return <>{roles.map(k => <Tag key={k}>{role_map.get(k)?.name || k}</Tag>)}</>
    }
    if (type === 'paragraph') {
        const context = roles.map(k => role_map.get(k)?.name || k).join(', ')
        return context && <Tooltip title={context}>
            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {context}
            </div>
        </Tooltip>
    }
    return <></>
}
export const RoleTags = connect(() => {
    const { role_map } = getState()
    return { role_map }
})(_RoleTags)